<template>
  <div>
    <el-table :data="list" border fit highlight-current-row>
      <el-table-column
        v-loading="loading"
        align="center"
        width="80px"
        label="序号"
        element-loading-text="加载中"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.num }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="180px" label="创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.updatedAt | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="200px" label="文件名">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="120px" label="封面">
        <template slot-scope="scope">
          <img :width="60" :src="'https://asset.u-link.club/'+scope.row.pageURL" class="avatar" alt="">
        </template>
      </el-table-column>
      <el-table-column align="center" width="100px" label="文件类型">
        <template slot-scope="scope">
          <el-tag :type="scope.row.type | colorFilter">
            {{ scope.row.type | typeFilter }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" width="auto" min-width="160px" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" plain size="small" @click="edit(scope.row)">编辑</el-button>
          <el-button type="danger" plain size="small" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>=8" :total="total" :page.sync="query.page" :limit.sync="query.limit" @pagination="() => { this.$reload() }" />
  </div>
</template>

<script>
import Pagination from '../../../components/Pagination'
import { deleteFile } from '../../../api/file'
export default {
  name: 'NotifyTable',
  components: { Pagination },
  filters: {
    typeFilter(status) {
      const statusMap = {
        'sb3': 'sb3',
        'py': 'py'
      }
      return statusMap[status]
    },
    colorFilter(status) {
      const statusMap = {
        'sb3': 'success',
        'py': 'primary'
      }
      return statusMap[status]
    }
  },
  props: {
    list: {
      type: Array,
      default: function() {
        return []
      }
    },
    loading: {
      type: Boolean,
      default: true
    },
    total: {
      type: Number,
      default: null
    },
    query: {
      type: Object,
      default: function() {
        return {
          page: 1,
          limit: 10,
          name: null,
          type: 'all',
          sort: '+id'
        }
      }
    }
  },
  data() {
    return {
      workURL: 'http://manager-1300279250.cos.ap-chengdu.myqcloud.com/work/',
      imgURL: 'http://manager-1300279250.cos.ap-chengdu.myqcloud.com/image/'
    }
  },
  methods: {
    del(item) {
      this.$confirm('文件删除后无法恢复, 是否继续?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const config = { id: item.id, pageURL: item.pageURL, fileURL: item.fileURL }
        deleteFile(config).then(res => {
          if (res.code === 20000) {
            this.$SUCCESS('删除文件成功')
            this.$reload()
          } else if (res.code === 10001) {
            this.$notify({
              title: '文件正在被使用',
              message: res.msg,
              type: 'error'
            })
          }
        }).catch(() => {
          this.$ERROR('删除文件失败')
        })
      }).catch(() => {})
    },
    edit(item) {
      this.$emit('edit', item)
    }
  }
}
</script>

<style scoped>

</style>
